<template>
  <div class="user-activities-page">
    <h1>我的活动</h1>

    <!-- 搜索筛选 -->
    <div class="search-bar">
      <el-form :inline="true" :model="searchForm" class="search-form">
        <el-form-item label="活动类型">
          <el-select v-model="searchForm.type" placeholder="请选择活动类型" clearable>
            <el-option
              v-for="item in activityTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="活动时间">
          <el-date-picker
            v-model="searchForm.date"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
        <el-form-item label="活动地点">
          <el-input v-model="searchForm.location" placeholder="请输入活动地点" clearable />
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select v-model="searchForm.status" placeholder="请选择活动状态" clearable>
            <el-option label="已报名" value="已报名"></el-option>
            <el-option label="进行中" value="进行中"></el-option>
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="已答完" value="已答完"></el-option>
            <el-option label="已取消" value="已取消"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 活动列表 -->
    <el-card class="activities-table-card">
      <template #header>
        <div class="card-header">
          <span>我的参与记录</span>
        </div>
      </template>

      <el-table :data="paginatedActivities" style="width: 100%" border>
        <el-table-column prop="activityId" label="活动ID" width="150" />
        <el-table-column prop="name" label="活动名称" width="180" />
        <el-table-column prop="type" label="类型" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="活动时间" width="180" />
        <el-table-column prop="registrationDate" label="报名日期" width="120" />
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button size="small" @click="viewDetails(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalActivities"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="detailsDialogVisible"
      title="活动详情"
      width="500px"
    >
      <p><strong>活动ID:</strong> {{ selectedActivityDetails?.activityId }}</p>
      <p><strong>活动名称:</strong> {{ selectedActivityDetails?.name }}</p>
      <p><strong>类型:</strong> {{ selectedActivityDetails?.type }}</p>
      <p><strong>状态:</strong> <el-tag :type="getStatusTagType(selectedActivityDetails?.status)">{{ selectedActivityDetails?.status }}</el-tag></p>
      <p><strong>活动时间:</strong> {{ selectedActivityDetails?.time }}</p>
      <p><strong>报名日期:</strong> {{ selectedActivityDetails?.registrationDate }}</p>
      <p><strong>地点:</strong> {{ selectedActivityDetails?.location }}</p>
      <p><strong>描述:</strong> {{ selectedActivityDetails?.description }}</p>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="detailsDialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

// 活动类型（用于搜索筛选）
const activityTypes = ref([
  { label: '资源回收', value: '资源回收' },
  { label: '护水行动', value: '护水行动' },
  { label: '公益服务', value: '公益服务' }, // 更名为公益服务以匹配模块名称
])

// 搜索表单
const searchForm = ref({
  type: '',
  date: [],
  location: '',
  status: ''
})

// 模拟已报名的活动数据
const allActivities = ref([
  {
    activityId: 'A202403200001',
    name: '西湖水质监测',
    type: '护水行动',
    status: '已报名',
    time: '2024-03-25 09:00-11:00',
    registrationDate: '2024-03-20',
    location: '西湖风景区',
    description: '参与西湖水质的日常监测工作。',
  },
  {
    activityId: 'A202403200002',
    name: '电池回收',
    type: '资源回收',
    status: '已完成',
    time: '2024-03-15 09:00-11:00',
    registrationDate: '2024-03-10',
    location: '社区回收站',
    description: '将废旧电池集中回收，避免污染环境。',
  },
  {
    activityId: 'A202403200003',
    name: '关爱老人行动',
    type: '公益服务',
    status: '已报名',
    time: '2024-04-25 09:00-11:00',
    registrationDate: '2024-04-20',
    location: 'XX养老院',
    description: '定期探访养老院老人，提供陪伴和帮助。',
  },
  {
    activityId: 'A202403200004',
    name: '募捐-为山区助力',
    type: '公益服务',
    status: '进行中',
    time: '2024-03-22 09:00-11:00',
    registrationDate: '2024-03-18',
    location: '线上平台',
    description: '为山区贫困儿童募捐学费和学习用品。',
  },
  {
    activityId: 'A202403200005',
    name: '城市绿化志愿者',
    type: '公益服务',
    status: '已完成',
    time: '2024-03-10 14:00-16:00',
    registrationDate: '2024-03-05',
    location: '市中心公园',
    description: '参与城市公园的植树和维护工作。',
  },
  {
    activityId: 'A202403200006',
    name: '苏州—节水资源答题',
    type: '护水行动',
    status: '已答完',
    time: '2024-03-22 09:00-11:00',
    registrationDate: '2024-03-21',
    location: '线上平台',
    description: '参与线上节水知识问答，赢取环保积分。',
  },
  {
    activityId: 'A202403200007',
    name: '旧书捐赠活动',
    type: '资源回收',
    status: '已报名',
    time: '2024-04-05 10:00-12:00',
    registrationDate: '2024-04-01',
    location: '大学图书馆',
    description: '捐赠闲置旧书，支持乡村图书馆建设。',
  },
  {
    activityId: 'A202403200008',
    name: '爱心义卖会',
    type: '公益服务',
    status: '进行中',
    time: '2024-04-10 10:00-17:00',
    registrationDate: '2024-04-08',
    location: '商业步行街',
    description: '义卖手工艺品，所得款项用于慈善项目。',
  },
  {
    activityId: 'A202403200009',
    name: '社区环保宣传',
    type: '护水行动',
    status: '已完成',
    time: '2024-03-01 09:00-11:00',
    registrationDate: '2024-02-28',
    location: '社区宣传栏',
    description: '张贴环保海报，向居民宣传环保知识。',
  },
  {
    activityId: 'A202403200010',
    name: '废旧电器回收',
    type: '资源回收',
    status: '已报名',
    time: '2024-04-12 13:00-16:00',
    registrationDate: '2024-04-10',
    location: '电器回收中心',
    description: '回收废旧家用电器，进行环保处理。',
  },
])

const filteredActivities = computed(() => {
  let filtered = allActivities.value

  // 根据类型过滤
  if (searchForm.value.type) {
    filtered = filtered.filter(activity => activity.type === searchForm.value.type)
  }

  // 根据时间过滤
  if (searchForm.value.date && searchForm.value.date.length === 2) {
    const [startDate, endDate] = searchForm.value.date
    filtered = filtered.filter(activity => {
      const activityDate = activity.time.split(' ')[0] // 只取日期部分
      return activityDate >= startDate && activityDate <= endDate
    })
  }

  // 根据地点过滤
  if (searchForm.value.location) {
    filtered = filtered.filter(activity => activity.location.includes(searchForm.value.location))
  }

  // 根据状态过滤
  if (searchForm.value.status) {
    filtered = filtered.filter(activity => activity.status === searchForm.value.status)
  }
  return filtered
})

const currentPage = ref(1)
const pageSize = ref(10)

const totalActivities = computed(() => filteredActivities.value.length)

const paginatedActivities = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredActivities.value.slice(start, end)
})

const detailsDialogVisible = ref(false)
const selectedActivityDetails = ref(null)

const getStatusTagType = (status) => {
  switch (status) {
    case '已完成':
    case '已答完':
      return 'success'
    case '进行中':
    case '已报名':
      return 'warning'
    case '已取消':
      return 'info'
    default:
      return ''
  }
}

const handleSearch = () => {
  currentPage.value = 1
}

const resetSearch = () => {
  searchForm.value = {
    type: '',
    date: [],
    location: '',
    status: ''
  }
  currentPage.value = 1
}

const viewDetails = (activity) => {
  selectedActivityDetails.value = activity
  detailsDialogVisible.value = true
}

const handleSizeChange = (val) => {
  pageSize.value = val
  currentPage.value = 1
}

const handleCurrentChange = (val) => {
  currentPage.value = val
}

onMounted(() => {
  // 可以在这里加载初始数据，但目前使用模拟数据
})
</script>

<style scoped>
.user-activities-page {
  padding: 20px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
}

h1 {
  font-size: 26px;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.search-bar {
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.search-form .el-form-item {
  margin-right: 20px;
  margin-bottom: 0;
}

.activities-table-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 